<template>
	<view class="body">
		<view class="row">
			<view class="desc">订单编号：</view>
			<view class="code">{{list.orderSn}}</view>
		</view>
		<view class="row">
			<view class="desc">订单金额：</view>
			<view class="code">{{list.totalPrice}}元</view>
		</view>
	
		<view class="title">选择支付方式</view>
		<view class="content">
			<radio-group class="pay" @change="checked">
				<view class="top">
					<view class="left">
						<image class="img" src="../../../../static/icons/alipay.png"></image>
						<view class="text">支付宝支付</view>
					</view>
					<label>
						<radio value="1" />
					</label>
				</view>
				<view class="top">
					<view class="left">
						<image class="img" src="../../../../static/icons/wxpay.png"></image>
						<view class="text">微信支付</view>
					</view>
					<label>
						<radio value="2" />
					</label>
				</view>
			</radio-group>
		</view>
		
		<view class="bottom">
			<view class="btn" @tap="payMoney">立即支付</view>
			<view class="tips">
				点击立即支付，即代表您同意
				<view class="terms">《条款协议》</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreOrderById,payConfirm
	} from "../../../../api/my/index.js"
	export default {
		data() {
			return {
				list: [],
				paytype:'',
				id:[]
			};
		},
		onLoad(options) {
			this.id = options.orderId
			
			getPreOrderById(options.orderId).then(res => {
				console.log(res)
				this.list = res.data.orderItems[0]
			})
		},
		methods:{
			checked(e){
				console.log(e.detail.value)
				this.paytype = e.detail.value
			},
			payMoney(){
				var obj={orderId:this.id,payType:this.paytype}
				payConfirm(obj).then(res=>{
					console.log(res)
				})
				uni.navigateTo({
					url:`./payResult/payResult?price=${this.list.totalPrice}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		height: 100vh;
		background-color: #F1ECE7;
	}
	.row{
		display: flex;
		width: 94%;
		height: 45px;
		line-height: 45px;
		margin: 0 auto;
		
		.desc{
			font-size: 16px;
			color: #7d7d7d;
		}
		.code{
			font-size: 16px;
			margin-left: 5px;
		}
	}
	
	.title{
		width: 94%;
		margin: 0 auto;
		font-size: 17px;
		margin-top: 20px;
	}
	
	.pay {
		width: 94%;
		padding: 0 3% 20px 3%;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 60px;
			
			.left {
				display: flex;
				align-items: center;
				.img {
					width: 40px;
					height: 40px;
				}

				.text {
					margin-left: 15px;
					font-size: 15px;
				}
			}

		}
	}
	
	.bottom{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		.btn{
			width: 70%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 40px;
			color: #fff;
			background-color: #354e44;
		}
		.tips{
			display: flex;
			justify-content: center;
			align-items: baseline;
			font-size: 12px;
			color: #999;
			.terms{
				color: #5a9ef7;
			}
		}
	}
</style>
